<html>

	<head>
		<title>实时查询城市通过姓名或拼音简写</title>
	</head>
	<meta charset="utf-8">
	

	<body><input id="searchCityName" style="width: 100%;" type="text" placeholder="中文 / 拼音首字母" />
		<ul>
			<li pinyin="bj" cityname="北京">
				<a href="/cityBranch/12.html">北京 </a>
			</li>
			<li pinyin="dl" cityname="大连">
				<a href="/cityBranch/14.html">大连 </a>
			</li>
			<li pinyin="sh" cityname="上海">
				<a href="/cityBranch/13.html">上海 </a>
			</li>
			<li pinyin="jn" cityname="济南">
				<a href="/cityBranch/15.html">济南 </a>
			</li>
			<li pinyin="gz" cityname="广州">
				<a href="/cityBranch/17.html">广州 </a>
			</li>
			<li pinyin="jh" cityname="金华">
				<a href="/cityBranch/18.html">金华 </a>
			</li>
			<li pinyin="wh" cityname="武汉">
				<a href="/cityBranch/19.html">武汉 </a>
			</li>
			<li pinyin="nj" cityname="南京">
				<a href="/cityBranch/20.html">南京 </a>
			</li>
			<li pinyin="sz" cityname="深圳">
				<a href="/cityBranch/22.html">深圳 </a>
			</li>
			<li pinyin="tj" cityname="天津">
				<a href="/cityBranch/21.html">天津 </a>
			</li>
			<li pinyin="cd" cityname="成都">
				<a href="/cityBranch/24.html">成都 </a>
			</li>
			<li pinyin="ly" cityname="临沂">
				<a href="/cityBranch/25.html">临沂 </a>
			</li>
			<li pinyin="cc" cityname="长春">
				<a href="/cityBranch/26.html">长春 </a>
			</li>
			<li pinyin="hz" cityname="杭州">
				<a href="/cityBranch/27.html">杭州 </a>
			</li>
			<li pinyin="nb" cityname="宁波">
				<a href="/cityBranch/28.html">宁波 </a>
			</li>
			<li pinyin="qd" cityname="青岛">
				<a href="/cityBranch/29.html">青岛 </a>
			</li>
			<li pinyin="sy" cityname="沈阳">
				<a href="/cityBranch/33.html">沈阳 </a>
			</li>
		</ul>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script>
			function searchCity() {
				var searchCityName = $("#searchCityName").val();
				if(searchCityName == "") {
					$("ul li").show();
				} else {
					$("ul li").each(function() {
						var pinyin = $(this).attr("pinyin");
						var cityName = $(this).attr("cityName");
						if(pinyin.indexOf(searchCityName) != -1 ||
							cityName.indexOf(searchCityName) != -1) {
							$(this).show();
						} else {
							$(this).hide();
						}
					});
				}
			}
			$('#searchCityName').bind('input propertychange', function() {
				searchCity();
			});
		</script>
	</body>

</html>